<template>
  <div>
    <Title></Title>
    <div v-for="item in tasks"
         style="display: flex;border: 1px solid white;margin-top: 10px;margin-bottom: 10px;padding: 8px">
      <p style="color:white;flex: 1">
        任务内容:{{ item.desc }}<br/>
        任务奖励:{{ item.reward }}<br/>
      </p>

      <div>
        <el-button v-if="item.task_status === 0" type="success" @click="actionFun(item, 1)">接收</el-button>
        <el-button v-if="item.task_status === 0" type="warning" @click="actionFun(item, 9)">拒绝</el-button>

        <el-button v-if="item.task_status === 2" type="info">已完成</el-button>
        <el-button v-if="item.task_status === 9" type="danger">已拒绝</el-button>

        <el-upload
          v-if="item.task_status === 1"
          action=""
          :http-request="uploadHttpRequest"
          :limit="1"
          :file-list="fileList"
          :data="item"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>


      </div>


    </div>
  </div>
</template>

<script>

import Title from "../../components/title.vue";
import {getUserTaskApi, userAcceptTaskApi, userUploadTaskApi} from "../../api/http";

export default {
  name: "TaskPage"
  ,
  data() {
    return {
      tasks: [],
      fileList: [],
    }

  },
  components: {Title},
  async created() {
    await this.getUserTaskFun()
    console.log(this.tasks);
  },
  methods: {
    async uploadHttpRequest(param) {
      let task_id = param.data.id
      let file = param.file
      console.log(file);
      let formData = new FormData();
      formData.append('file', file);
      formData.append('task_id', task_id);
      let res = await userUploadTaskApi(formData)
      if (res.data.code === 200) {
        this.$message(res.data.msg)
        setTimeout(() => {
          location.reload()
        }, 1000)
      } else {
        this.$message(res.data.msg)
      }
    },
    async actionFun(item, status) {
      let task_id = item.id
      if (status === 1) {
        let res = await userAcceptTaskApi({task_id, status});
        this.$message("接受了任务")
        if (res.data.code === 200) {
          setTimeout(() => {
            location.reload()
          }, 1000)
        } else {
          this.$message(res.data.msg)
        }
      } else if (status === 9) {

        let res = await userAcceptTaskApi({task_id, status});
        if (res.data.code === 200) {
          this.$message("拒绝了任务")
          setTimeout(() => {
            location.reload()
          }, 1000)

        } else {
          this.$message(res.data.msg)
        }
      }
    },
    async getUserTaskFun() {
      let res = await getUserTaskApi()
      if (res.data.code === 200) {
        this.tasks = res.data.data;
      } else {
        this.$message.error(res.data.msg)
      }
    }
  }
}
</script>

<style scoped>

</style>
